import React from 'react';
import {Link} from 'react-router'
import style from '../style/header.css'

export  default class ComponentHeader extends React.Component {
    constructor() {
        super()
        this.state = {
            headerBg: true
        }
    }
    switchBg() {
        this.setState({
            headerBg: !this.state.headerBg
        })
    }
    render(){
        const styleCss = {
            header: {
                backgroundColor: this.state.headerBg? '#000' : 'red',
                color: '#fff'
            }
        }
        var userName = 'lines';
        //直接输出文本
        var text = '<h2>标签是纯文本输出</h2>';
        var html = '<h2>标签被解析</h2>';
        return (
            <header style={styleCss.header} onClick={this.switchBg.bind(this)}>
                <h1>这里是头部</h1>
                <ul>
                    <li><Link to={'/'}>首页</Link></li>
                    <li><Link to={'/list'}>列表</Link></li>
                </ul>

                <p>{ userName=='' ? '没登录' : '用户名' + userName }</p>
                <p> {text} </p>
                <div dangerouslySetInnerHTML={ {__html:html} }></div>
                <hr/>
            </header>
        )
    }
}
